<template>
    <div>
        <el-form :model="vipForm" :rules="rules" ref="vipForm" label-width="100px" class="demo-vipForm" method="">

            <el-form-item label="头像" prop="ImgID">
                <el-upload class="avatar-uploader" :action="baseapi + 'Files'" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="vipForm.Path" :src="baseimg + vipForm.Path" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item label="角色名" v-show="isShow">
                <el-select v-model="vipForm.RoleID" placeholder="请选择角色">
                    <el-option :label="item.Rname" v-for="(item, index) in role" :key="index" :value="6"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="姓名" prop="UserName">
                <el-input v-model="vipForm.UserName"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="Sex">
                <el-radio-group v-model="vipForm.Sex">
                    <el-radio label="男" name="sex"></el-radio>
                    <el-radio label="女" name="sex"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="出生日期" required>
                <el-col :span="11">
                    <el-form-item prop="Birthday">
                        <el-date-picker value-format="yyyy-MM-dd" placeholder="选择日期" v-model="vipForm.Birthday"
                            style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <el-form-item label="手机号码" prop="Phone">
                <el-input v-model="vipForm.Phone"></el-input>
            </el-form-item>
            <el-form-item label="账户" prop="LoginName">
                <el-input v-model="vipForm.LoginName"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="Status">
                <el-switch v-model="vipForm.Status"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('vipForm')">立即保存</el-button>
                <el-button @click="resetForm('vipForm')">重置</el-button>
            </el-form-item>
        </el-form>




    </div>

</template>

<script>
import basepath from '../../plugins/base.js'
import url from '@/plugins/base.js'
import { mapState } from 'vuex'
export default {
    name: 'edit',
    data() {
        return {
            role: [],
            baseimg: '',
            baseapi: '',
            img: '',

            imageUrl: '',

            pic: {
                UserId: 0,
                ImgID: 0,
                path: ''
            },
            vipForm: {
                UserId: 0,
                Path: '',
                UserName: "狗华",
                Sex: "男",
                Birthday: "",
                RoleID: 6,
                Phone: "",
                ImgID: 0,
                LoginName: "",

                Status: true
            },
            data: {}

            ,//表单验证规则
            rules: {
                ImgID:[
                    {required:true,message:'请上传头像',trigger:'blur'}
                ],
                UserName: [
                    { required: true, message: '请输入用户信息', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                RoleID: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ],
                Birthday: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ],
                Sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                Phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在必须为11位', trigger: 'blur' }
                ],
                LoginName: [
                    { required: true, message: '请输入账户', trigger: 'blur' }
                ],
                Images: [
                    { required: true, message: "请选择图片", trigger: "blur" }
                ]
            },
        }
    },
    model: {
        prop: "dialogFormVisible",
        event: "change",
    },
    props: {
        dialogFormVisible: Boolean,
        editData: Object,
    },
    watch: {
        editData: function (newvalue, oldvalue) {
            console.log('newvalue: ', newvalue);
            this.vipForm = JSON.parse(JSON.stringify(newvalue));
        },
    },
    methods: {
        //上传成功
        handleAvatarSuccess(res, file) {
            if (res.code == 1) {
                console.log(res.data)
                this.$message.success('图片上传成功!');
                this.imageUrl = URL.createObjectURL(file.raw);
                /* alert(res.data.imgID)
                console.log(res) */
                /* this.pic.ImgID = res.data.imgID;
                this.pic.path = res.data.path; */
                this.vipForm.ImgID = res.data.imgID;
                this.vipForm.Path=res.data.path
            } else {
                this.$message.error(res.msg);
            }
            console.log(this.vipForm.ImgID)
        },
        //上传之前
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';

            const isLtMB = file.size / 1024 / 1024 < 10;

            if (!isJPG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG 和 PNG 格式!');
            }
            if (!isLtMB) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return (isJPG || isPNG) && isLtMB;
        },


        //提交按钮
        submitForm(formName) {
            console.log(this.vipForm.ImgID)
            //进行表单验证
            this.$refs[formName].validate((valid) => {
                if (valid) {


                    this.data = JSON.parse(JSON.stringify(this.vipForm));
                    /* alert(JSON.stringify(this.data)) */
                    // //调用Api 保存数据
                    this.axios({
                        method: "PUT",
                        url: "User/Update1",
                        data: this.data
                    })
                        .then((res) => {
                            if (res.code > 0) {
                                //axios  完成添加
                                this.$message({
                                    message: res.msg,
                                    type: "success",
                                    showClose: true,
                                    duration: 3000,
                                });
                                //刷新主页面数据
                                this.$emit("refresh");
                                //关闭弹窗
                                this.$emit("change", false);
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error",
                                    showClose: true,
                                    duration: 3000,
                                });
                            }
                        })

                }
                else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
    created() {
        this.img = url.imgUrl;
        this.baseimg = basepath.imgUrl;
        this.baseapi = basepath.apiUrl;

        this.vipForm = JSON.parse(JSON.stringify(this.editData));
        console.log('this.editData: ', this.editData);
        this.axios({
            method: 'get',
            url: 'Role',
            params: null,
        }).then(res => {
            this.role = res.data
        })
    },
    computed: {
        ...mapState(['user'])
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>